<template>

    <div
            v-infinite-scroll="handleInfiniteOnLoad"
            class="demo-infinite-container-list"
            :infinite-scroll-disabled="busy"
            :infinite-scroll-distance="10" style="padding: 18px 18px 0 18px;background-color: #f3f4f7">
        <!--        <a-list :data-source="data">-->
        <!--            <a-list-item slot="renderItem" slot-scope="item">-->
        <!--                <a-list-item-meta :description="item.name" @click="handleClick(item.id + '?name=' + item.name)">-->
        <!--                    <a slot="title">{{ item.name }}</a>-->
        <!--                    <a-avatar-->
        <!--                            slot="avatar"-->
        <!--                            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"-->
        <!--                    />-->
        <!--                </a-list-item-meta>-->
        <!--                <div>{{item.no}}</div>-->
        <!--            </a-list-item>-->
        <!--            <div v-if="loading && !busy" class="demo-loading-container">-->
        <!--                <a-spin />-->
        <!--            </div>-->
        <!--        </a-list>-->
        <a-list size="large" :data-source="data">
            <a-list-item slot="renderItem" slot-scope="item, index"
                         @click="handleClick(item.id + '?name=' + item.name)" :style="'border-radius: 6px; margin-bottom: 24px;padding:15px 20px;font-size:18px;' + (index%2 == 0?'background:white':'background:white')">
                {{ item.name }}
            </a-list-item>
            <div v-if="loading && !busy" class="demo-loading-container">
                <a-spin/>
            </div>
            <!--            <div slot="header">-->
            <!--                Header-->
            <!--            </div>-->
            <!--            <div slot="footer">-->
            <!--                Footer-->
            <!--            </div>-->
        </a-list>
    </div>

</template>

<script>
    import {doPostUnlencoded} from "@/utils/requestUtil";
    import infiniteScroll from 'vue-infinite-scroll';

    // const data = [
    //     {
    //         name : 'test1',
    //         id : 1
    //     },
    //     {
    //         name : 'test2',
    //         id : 2
    //     },
    //     {
    //         name : 'test3',
    //         id : 3
    //     },
    // ]

    export default {
        inject: ['setTitle'],
        directives: {infiniteScroll},
        name: 'blocklist',
        props: {
            msg: String
        },
        data() {
            return {
                data: [],
                loading: false,
                busy: false,
                // url: '/prjproperty/api/wxuserarea/user/',
                url: 'fygcp/api/blocklist',
                user: '',
                params: {
                    code: this.$route.query.code,
                    state: this.$route.query.state,
                    agentid: 1000007,
                }
            }
        },
        beforeMount() {
            this.setTitle('方远物业业主管理系统');
            if (this.$cookies.isKey('userid')) {
                let myParams = {
                    user: this.$cookies.get('userid'),
                };
                doPostUnlencoded(this.url, myParams).then((res) => {
                    if (res.success) {
                        if (res.data.length > 0) {
                            this.data = res.data;
                        } else {
                            this.$message.error("查不到小区列表。")
                        }
                    }
                }).catch((err) => {
                    console.info(err);
                    this.$cookies.remove('userid');
                    this.doAuth();
                })
            } else {
                console.info("nocookies")
                this.doAuth();
            }
            // this.data = data
        },
        methods: {
            doAuth() {
                doPostUnlencoded("fygcp/oauth2/x", this.params).then((res) => {
                    if (res.data.authenticated) {
                        this.$cookies.set('userid', res.data.name, '1h');
                        this.user = res.data.name;
                        let myParams = {
                            user: this.user
                        };
                        doPostUnlencoded(this.url, myParams).then((res) => {

                            if (res.success) {
                                if (res.data.length > 0) {
                                    this.data = res.data;
                                } else {
                                    this.$message.error("查不到小区列表。")
                                }
                            }
                        }).catch((err) => {
                            this.$message.error("status:" + err.status + " msg:" + (err.status == '405' ? "数据服务器连接失败":"认证失败") )
                        })
                    } else {
                        this.$message.info("请在企业微信中打开。");
                    }
                }).catch((err) => {
                    this.$message.error("status:" + err.status + " msg:" + err.data.message )
                });
            },
            handleInfiniteOnLoad() {
                const data = this.data;
                this.loading = true;
                if (data.length > 14) {
                    // this.$message.warning('Infinite List loaded all');
                    this.busy = true;
                    this.loading = false;
                    return;
                }
                this.loading = false;
                // if (this.$cookies.isKey('userid')) {
                //     doGet(this.url + this.$cookies.get('userid'), null).then((res) => {
                //         this.data = data.concat(res.data);
                //         this.loading = false;
                //     }).catch((err) => {
                //         console.info(err);
                //     })
                // } else {
                //     doPostUnlencoded("fygcp/oauth2/2", this.params).then((res) => {
                //         if (res.result) {
                //             doGet(this.url + res.data, null).then((res) => {
                //                 this.data = data.concat(res.data);
                //                 this.loading = false;
                //             }).catch((err) => {
                //                 console.info(err);
                //             })
                //         }
                //     }).catch((err) => {
                //         console.info(err);
                //     });
                // }
            },
            handleClick(e) {
                console.info(e);
                this.$router.push("/propertylist/" + e);
            }
        }
    }

</script>
<style>
    .demo-infinite-container-list {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        overflow: auto;
        padding: 1.2px 1.2px;
        height: 640px;
    }

    .demo-loading-container-list {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
    }
</style>
